<template>
	<view class="login">
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">登录</block>
		</cu-custom>		
		<view class="main" :style="{ height: screenHeight + 'px' }">
			<view class="contain">
				<form @submit="login" @reset="formReset">
					<view class="line">
						<image src="/static/login_user.png"></image>
						<input type="digit" name="uname" v-model="params.uname" placeholder-style="color:#c7c7c7" placeholder="请输入手机号码"/>
					</view>
					<view class="line">
						<image src="/static/login_pwd.png"></image>
						<input type="password" name="pwd" v-model="params.pwd" placeholder-style="color:#c7c7c7" placeholder="请输入密码">
					</view>
					<view class="line" v-if="shop.is_login_sms">
						<image src="/static/verify.png"></image>
						<view>
							<input class="code" type="text" placeholder-style="color:#c7c7c7" v-model="wcode" placeholder="请输入验证码"/>
							<button @tap="GetCodes" class="getcode" :disabled="getCode" type="warn" hover-class="none" size="mini">
								{{ time !== 0 ? time + 's' : '获取验证码' }}
							</button>
						</view>						
					</view>
					<button type="warn" class="btn" formType="submit">登录</button>
					<view class="login_">
						<navigator hover-class="none" url="/pages/reset/index">忘记密码</navigator>
						<navigator hover-class="none" v-if="shop.is_app_register" url="/pages/register/index">立即注册</navigator>
					</view>
				</form>
				<!-- #ifdef APP-PLUS -->
				<view class="third">
					<view class="cut">
						<text>其他方式登录</text>
					</view>
					<view class="other">
						<image src="/static/login_weixin.png" @click="$store.dispatch('wxLogin', { callback: callback, referrer: referrer, customer_id: shop.customer_id })"></image>
					</view>
				</view>				
				<!-- #endif -->
			</view>
		</view>
		<neil-modal 
			:show="show"
			title="提示"
			@cancel="show = false"
			@confirm="bindBtn">
			<input type="text" v-model="referrer" placeholder="请输入上级ID" class="id"/>
		</neil-modal>
	</view>
</template>

<script>
	import graceChecker from '@/common/utils/graceChecker'
	import neilModal from '@/components/neil-modal'
	import { mapGetters } from 'vuex'
	import { sendPhoneMsg } from '@/common/api'
	export default {
		name: 'Login',
		components: { neilModal },
		data() {
			return {
				getCode: false,
				time: 0,
				code: '',
				wcode: '',
				Login: true,
				show: false,
				referrer: '',
				screenHeight: 0,
				params: {
					uname: '',
					pwd: ''
				}
				
			};
		},
		onLoad () {
			this.screenHeight = uni.getSystemInfoSync().windowHeight
		},
		computed: {
			...mapGetters([
				'shop'
			])
		},
		methods: {
			login (e) {
				const rules = [ 
					{ name : "uname", checkType : "phoneno", errorMsg:"请输入正确的手机号"},
					{ name : "pwd", checkType : "notnull", checkRule: "", errorMsg:"请输入密码"}
				]
				const formData = e.detail.value
				const checkRes = graceChecker.check(formData, rules)
			    if (checkRes) {
					if (this.shop.is_login_sms) {
						if (this.code && this.code === this.wcode) {
							this.$store.dispatch('userLogin', this.params)
						} else {
							uni.showToast({
								icon: 'none',
								title: '请输入正确的验证码'
							})
						}
					} else {
						this.$store.dispatch('userLogin', this.params)
					}
				} else {
					uni.showToast({ title: graceChecker.error, icon: "none" })
				}
			},
			callback (tag) {
				if (tag) {
					this.show = tag
				} else {
					return this.referrer
				}
			},
			GetCodes () {
				this.isPhone({ phone: this.params.uname, action: 1}, res => {
					uni.showLoading({ mask: true })
					sendPhoneMsg(res).then(res => {
						uni.hideLoading()
						if (!res.code) {
							this.getCode = true
							this.time = 60
							let timer = setInterval(() => {
								this.time--
								if (!this.time) {
									clearInterval(timer)
									this.time = 0
									this.getCode = false
								}
							}, 1000)
							this.code = res.mcode
							uni.showToast({
								icon: 'none',
								title: res.msg
							})
						} else {
							uni.showModal({
								content: res.msg,
								showCancel: false
							})
						}
					})
				})
			},
			isPhone (data, callback) {
				const reg = /^1[34578]\d{9}$/
				if (reg.test(this.params.uname)) {
					callback(data)
				} else {
					uni.showModal({
						title:'',
						content: '请输入正确的手机号码',
						showCancel: false
					})
				}
			},			
			bindBtn () {
				this.show = false
				if (this.referrer) {
					this.$store.dispatch('WeiXinLogin', { callback: this.callback, referrer: this.referrer })
				} else {
					uni.showModal({
						content: '请输入上级ID',
						showCancel: false,
						success: rst => {
							if (rst.confirm) this.show = true
						}
					})
				}
			}
		}
	}
</script>

<style lang="less">
@import '../../common/styles/variables.less'; 
uni-page-body, page, .login { min-height: 100%;overflow: hidden;height: 100%;}	
.login {
	background-color:white;
	.id {
		margin: 20upx;
		padding-bottom: 15upx;
	}
	.main {
		height: 100%;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		.contain {
			width: 80%;
			form {
				.line {
					position: relative;
					color: #333;
					padding: 15upx 0 15upx 5upx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 20upx;
					.border-bottom;
					& > image {
						width: 40upx;
						height: 40upx;
						margin-right: 15upx;
					}
					& > input {
						flex: 1;
					}
					& > view {
						flex: 1;
						display: flex;
						justify-content: space-between;
						button {
							margin: 0;
							min-width: 180upx;
						}
					}
				}
				.btn {
					margin: 60upx 0 15upx 0;
				}
				.login_ {
					display: flex;
					color:#c7c7c7;
					font-size: 22upx;
					justify-content: space-between;
					& > navigator {
						padding: 10upx 15upx;
						margin: 20upx 0;
						&:nth-of-type(1) {
							text-decoration: underline;
							color:#0066cb;
						}
						&:nth-of-type(2) {
							background:@red;
							color:white;
							border-radius: 30upx;
						}
					}
				}
			}
			.third {
				margin-top: 200upx;
					.cut {
						color:#a4a4a4;
						text-align: center;
						position: relative;
						& > text { font-size: 22upx; }
						&::before { left: 0 }
						&::after { right: 0 }
						&::before,&::after {
							position: absolute;
							width: 30%;
							height: 1px;
							background: #dfdfdf;
							content: '';
							top: 50%;
							margin-top: 2px;
						}
					}
					.other {
						display: flex;
						justify-content: center;
						margin-top: 20upx;
						& > image {
							width: 100upx;
							height: 100upx;
						}
					}
				}			
		}
		.alert {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 33;
			display: flex;
			justify-content: center;
			align-items: center;
			.statusbar {
				z-index: 44;
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: rgba(0,0,0,.6);
			}
			.input {
				z-index: 55;
				background-color:white;
				padding: 30upx;
				border-radius: 15upx;
				box-sizing: border-box;
				width: 70%;
				.title {
					text-align: center;
					font-size: 28upx;
					box-sizing: border-box;
				}
				.id {
					padding: 10upx 15upx;
					margin: 30upx 0;
					border:1px solid #f1f1f1;
					border-radius: 20upx;
					font-size: 22upx;
					
				}
				.login_ {
					display: flex;
					justify-content: space-between;
				}
			}
		}
	}
}
</style>
